<template>
  <div class="category acea-row">
    <div class="sort">
      <div
        class="item acea-row row-between-wrapper"
        :class="index === current ? 'bg-color colorfff' : ''"
        v-for="(item, index) in productClassify"
        :key="index"
        @mouseenter="enter(index)"
      >
        <div class="name line1">{{ item.translateName }}</div>
      </div>
    </div>
    <!-- <classifyCard
      v-show="seen && categoryCurrent"
      @goCate="goCate"
      :list="categoryCurrent"
    /> -->
    <div class="sortCon" v-show="seen && categoryCurrent">
      <div class="erSort">
        <div
          class="item acea-row row-middle"
          v-for="(item, index) in categoryCurrent"
          :key="index"
        >
          <div class="name line1">{{ item.translateName }}</div>
          <div class="cateList">
            <span
              class="cateItem"
              @click="goCate(items)"
              v-for="(items, indexn) in item.childList"
              :key="indexn"
            >
              {{ items.translateName }}
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { isJSON, mapToLang, deepClone } from "@/utils/index.js";
import { mapGetters } from "vuex";
export default {
  components: {},
  props: {},
  data() {
    return {
      seen: false,
      current: -1,
      categoryCurrent: [],
    };
  },
  computed: {
    locale() {
      return mapToLang(this.$i18n.locale);
    },
    ...mapGetters(["translateNameProductClassify"]),
    productClassify() {
      return this.translateNameProductClassify;
    },
  },
  watch: {
    seen: {
      handler: function (newVal) {
        if (!newVal) {
          this.current = -1;
        }
      },
    },
    // locale: {
    //   handler: function () {
    //     // this.troggleLang();
    //     console.log("locale");
    //     this.troggleLang();
    //     this.enter(this.current);
    //   },
    // },
  },

  created() {},
  mounted() {
    // this.troggleLang();
  },
  methods: {
    enter(index) {
      this.seen = true;
      this.current = index;
      this.categoryCurrent = this.productClassify[index].childList;
    },
    goCate(item) {
      this.seen = false;
      this.categoryCurrent = [];
      this.$emit("goCate", item);
    },
    toTranslateName(list) {
      let arr = [];
      if (Array.isArray(list)) {
        list.forEach((item) => {
          if (isJSON(item.name)) {
            item.translateName = JSON.parse(item.name)[this.locale];
          } else {
            item.translateName = item.name;
          }

          if (Array.isArray(item.childList)) {
            this.toTranslateName(item.childList);
          }
        });
      }
      return list;
    },
    // troggleLang() {
    //   let arr = deepClone(this.$store.state.productClassify);
    //   this.productClassify = this.toTranslateName(arr);
    // },
  },
  destroyed() {},
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/variables.scss";

.colorfff {
  color: #fff;
}
.sort {
  width: 250px;
  height: 100%;
  overflow: scroll;
  box-sizing: border-box;
  color: $use-color-info;
  background-color: $use-color-bg;
  padding: 16px;
  padding-right: 8px;
  border-radius: 6px;
  .item {
    height: 39px;
    padding: 0 21px;
    border-radius: 6px;
    .name {
      // width: 150px;
      flex: 1;
      cursor: pointer;
    }
    .iconfont {
      font-size: 10px;
    }
  }
}
.sortCon {
  flex: 1;
  height: 100%;
  overflow: scroll;
  background-color: #fff;

  .title {
    padding-bottom: 8px;
    border-bottom: 1px solid #f1f1f1;
    .font-color {
      padding-bottom: 8px;
      font-size: 16px;
      border-bottom: 2px solid $user--color-primary;
    }
  }
  .erSort {
    // display: flex;
    // flex-wrap: wrap;
    // align-items: flex-start;
    // align-content: flex-start;
    // flex-direction: row;
    column-fill: balance;
    column-count: 3;
    column-gap: 30px;
    .item {
      // margin-top: 20px;
      // break-inside: avoid;
      width: 100%;
      .name {
        font-weight: 700;
        width: 100%;
        font-size: 18px;
        color: #000;
      }
      .item-child {
        margin: 12px 30px 10px 0;
        font-size: 14px;
        color: $use-color-info-light-2;
      }
      .pictrue {
        width: 50px;
        height: 50px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .cateList {
      margin: 10px 10px 10px 0;
      font-size: 14px;
      color: $use-color-info-light-2;
      display: flex;
      flex-direction: column;
      .cateItem {
        text-align: left;
        display: inline-block;
        word-wrap: break-word;
        //word-break: break-all;
        font-weight: 500;
        margin-bottom: 8px;
        cursor: pointer;
        font-size: 14px;
        color: #30303c;
        &:hover {
          color: $user--color-primary;
        }
      }
    }
  }
}
</style>
